<!-- 提示框 -->
<template>
  <cube-popup type="my-popup" class="my-popup" maskClosable ref="alert" @mask-click="$emit('mask-click')">
    <div class="m-alert-wrap" :class="[cls]">
      <div class="m-alert">
        <slot name="header">
          <h4 v-html="title"></h4>
        </slot>
        <div class="tip-content">
          <slot></slot>
        </div>
      </div>
      <div class="alert-tools">
        <slot name="footer">
          <div class="m-alert-btn" @click="hide">确定</div>
        </slot>
      </div>
    </div>
  </cube-popup>
</template>

<script>

  export default {
    props: {
        title: {
            type: String,
            default: '提示'
        },
        cls: {
            type: String,
            default: ''
        },
    },
    data(){
      return {

      }
    },
      mounted(){
        document.body.appendChild(this.$refs.alert.$el)
      },
    methods: {
      show(){
        this.$refs.alert.show()
      },
        hide(){
            this.$refs.alert.hide()
        }
    }
  }
</script>

<style lang="scss">
  @import "~common/scss/variable";

  .m-alert-wrap {
    width:634px;
    //height:350px;
    //min-height:350px;
    height: auto;
    background:rgba(255,255,255,1);
    border-radius:14px;
    //display: flex;
    //flex-direction: column;
  }

  .m-alert {
    padding-top: 46px;
    //flex: 1;
    //height: calc(100% - 110px);
    min-height: 240px;
    h4 {
      font-size:32px;
      color:rgba(32,44,91,1);
      text-align: center;
    }
  }

  .alert-tools {
    height: 110px;
    //min-height: 110px;
    border-top: 2px solid #D0D4E4;
    font-size:30px;
    color:rgba(18,83,252,1);
  }


  .m-alert-btn {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
  }

  .tip-content {
    line-height: 45px;
    font-size:30px;
    color:rgba(32,44,91,1);
    text-align: center;
    min-height: 163px;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      font-style: normal;
      padding: 0 5px;
    }
  }


</style>
